<template>
	<view>
		<view class="search-station-container">
			<SearchStation></SearchStation>
		</view>
		<swiper class="swiper" indicator-dots="{{true}}" indicator-active-color="#FFFFFF">
			<swiper-item>
				<image class="swiper-img" src="https://cdn.uviewui.com/uview/resources/lQLPJxuC-ZcFyGTMoM0BVLD2lX-Lx12vGwTjBk_nwP0A_340_160.png"/>
			</swiper-item>
		</swiper>
		<view class="quick-link-container">
			<view class="quick-link-item" v-for="item in 5">
				<image class="quick-link-icon" src="https://cdn.uviewui.com/uview/resources/lQLPJxuC-ZcFyGTMoM0BVLD2lX-Lx12vGwTjBk_nwP0A_340_160.png"/>
				<view class="quick-link-text">哈哈哈哈</view>
			</view>
		</view>
		<view class="home-card-row">
			<view class="card-item" @tap="goStationList">
				<view class="card-left">
					<view class="card-left-title">查找电桩</view>
					<view class="card-left-subtitle">搜寻合适充电桩</view>
				</view>
				<image class="card-right-image" src="https://cdn.uviewui.com/uview/resources/lQLPJxuC-ZcFyGTMoM0BVLD2lX-Lx12vGwTjBk_nwP0A_340_160.png"/>
			</view>
			<view class="card-item">
				<view class="card-left">
					<view class="card-left-title">每日签到</view>
					<view class="card-left-subtitle">连续签到又好礼</view>
				</view>
				<image class="card-right-image" src="https://cdn.uviewui.com/uview/resources/lQLPJxuC-ZcFyGTMoM0BVLD2lX-Lx12vGwTjBk_nwP0A_340_160.png"/>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import SearchStation from '@/components/search-station.vue'
	
	function goStationList() {
		uni.navigateTo({
			url: '/pages/stationList/stationList'
		})
	}
	
	defineExpose({goStationList})
</script>

<style lang="scss" scoped>
	.search-station-container {
		margin: 0 10px;
	}
	
	.swiper {
		margin-top: 10px;
		width: 100%;
		height: 200px;
	}
	.swiper-img {
		width: 100%;
		height: 100%;
	}
	
	.quick-link-container {
		display: flex;
		justify-content: space-between;
		height: 50px;
		padding: 20px 30px;
	}
	.quick-link-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.quick-link-icon {
		width: 30px;
		height: 30px;
	}
	.quick-link-text {
		font-size: 12px;
		margin: 4px;
	}
	
	.home-card-row {
		display: flex;
		margin: 0 15px;
	}
	.card-item {
		box-shadow: 4px 4px 8px rgba(0, 0, 0, .2);
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 15px 10px;
		border-radius: 10px;
		box-sizing: border-box;
		margin-left: 20px;
	}
	.card-item:nth-child(1) {
		margin-left: 0px;
	}
	.card-left {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.card-left-title {
		font-size: 14px;
		line-height: 1;
		color: $u-theme-color;
	}
	.card-left-subtitle {
		font-size: 12px;
		line-height: 1;
	}
	.card-right-image {
		height: 40px;
		width: 30px;
	}
</style>